<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>健康饮食推荐</title>
<meta name="keywords" content="BootDo管理系统">
<meta name="description" content="BootDo管理系统">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<link href="/css/login.css" rel="stylesheet">

<!-- 解决session超时登录跳转页面内嵌问题 -->
<script>
	if (window.top !== window.self) {
	    window.top.location = window.location;
	}
</script>
</head>

<body class="signin">
	<div class="signinpanel">
		<div class="row">
			<div class="col-sm-7">
				<div class="signin-info">
					<div class="logopanel m-b">
						<h1>健康饮食推荐系统</h1>
					</div>
				</div>
			</div>
			<div class="col-sm-5">
				<form id="signupForm">
					<h3 class="text-center">用户注册</h3>
					<p class="m-t-md text-center">欢迎注册健康饮食推荐系统</p>
					<input type="text" name="username" PLACEHOLDER="请输入账号" class="form-control uname" />
					<input type="password" id="password" name="password" PLACEHOLDER="请输入密码" class="form-control pword m-b" />
					<input type="password" id="password2" name="password2" PLACEHOLDER="请确认密码" class="form-control pword m-b" />
					<p id="msg_pwd" style="margin-left: 150px"></p>
					<input type="text" name="userAge" PLACEHOLDER="请输入年龄" class="form-control age" />
					<label class="radio-inline">
						<input type="radio" name="userSex" value="0" checked>男
					</label>
					<label class="radio-inline">
						<input type="radio" name="userSex" value="1" checked>女
					</label>
					<div class="form-control" style="text-align:center;">
						<label class="radio-inline">
							<input type="radio" name="userType" value="1" checked>普通用户
						</label>
					</div>
					<a id="register" class="btn btn-login btn-block" >注&nbsp;&nbsp;&nbsp;&nbsp;册</a>
					<a id="back" class="btn btn-login btn-block" >返回登陆</a>
				</form>
			</div>
		</div>
		<div class="signup-footer">
			<div class="pull-left">&copy; 2020 健康饮食推荐系统 </div>
		</div>
	</div>
<script th:inline="javascript"> 
	var ctx = [[@{/}]] ; 
</script>
<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script src="/js/bootstrap.min.js?v=3.3.6" th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>

<!-- 自定义js -->
<script src="/js/content.js?v=1.0.0" th:src="@{/js/content.js?v=1.0.0}"></script>

<!-- jQuery Validation plugin javascript-->
<script src="/js/ajax-util.js"></script>
<script src="/js/plugins/validate/jquery.validate.min.js" th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
<script src="/js/plugins/validate/messages_zh.min.js" th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>
<script src="/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>

<script type="text/javascript">

	//登录提交
	$(document).ready(function () {
	    $("#register").on('click', function () {
	        $("#signupForm").submit();
	    });
	    validateRule();
	    $("body").keydown(keyDownLogon);
		$("#back").on('click',function () {
			parent.location.href = '/login';
		});
	});

	$.validator.setDefaults({
	    submitHandler: function () {
	        login();
	    }
	});


   
	//键盘Enter按键
	function keyDownLogon() {
	    if (event.keyCode == "13") {
	        $("#login").trigger('click');
	    }
	}

	//表单校验
	function validateRule() {
	    var icon = "<i class='fa fa-times-circle'></i> ";
	    $("#signupForm").validate({
	        rules: {
	            username: {
	                required: true,
					minlength: 3,
					maxlength: 8
	            },
	            password: {
	                required: true,
					minlength: 6,
					maxlength: 16
	            },
				password2: {
					required: true,
					minlength: 6,
					maxlength: 16,
					equalTo: "#password"
				},
				age: {
	            	required: true
				},
				sex: {
	            	required: true
				}
	        },
	        messages: {
	            username: {
	                required: icon + "请输入您的用户名",
					minlength: icon + "用户名长度不能小于3个字母",
					maxlength: icon + "用户名长度不能多于8个字母"
	            },
	            password: {
	                required: icon + "请输入您的密码",
					minlength: icon + "密码长度不能小于6个字母",
					maxlength: icon + "用户名长度不能多于16个字母"
				},
				password2: {
	            	required: icon + "请再次输入您的密码",
					minlength: icon + "密码长度不能小于6个字母",
					maxlength: icon + "用户名长度不能多于16个字母",
					equalTo: icon + "两次密码输入不一致"
				},
				age: {
	            	required: icon + "请输入您的年龄",
				},
				sex: {
					required: icon + "请选择您的性别",
	            }
	        }
	    })
	}
	$.validator.setDefaults({
		submitHandler: function () {
			register();
		}
	});

	//提交至后台
	function register() {
		$.ajax({
			type: "POST",
			url: "/register",
			data: $('#signupForm').serialize(),
			success: function (r) {
				if (r.code == 0) {
					parent.location.href = '/index';
				} else {
					layer.msg(r.msg);
				}
			},
		});
	}
</script>
</body>
</html>
